<template>
  <div class="index">
    <header class="clearfix bg-white">
      <router-link to="/receive" tag="div" class="l" :class="{'v-link-active':$route.name=='indexBefore'}"><span>接机</span></router-link>
      <router-link to="/send" tag="div" class="r"><span>送机</span></router-link>
    </header>
    <transition name="slide-down">
      <keep-alive>
        <router-view class="router-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
  export default {
    name: 'index',
    componets: {
    },
    data () {
      return {
      }
    },
    mounted () {
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  @import '../../assets/less/border.less';
  .index{
    header{
      height: 0.88rem;
      line-height: 0.88rem;
      text-align: center;
      border-bottom: 1px solid #d2d2d2;
      div{
        font-size: 0.28rem;
        color: #666;
        width: 50%;
        height: 100%;
        span{
          display: block;
          height: 100%;
          box-sizing: border-box;
          width: 80%;
          margin:0 auto;
          font-weight: bold;
        }
      }
      div.v-link-active{
        span{
          color: #cdad66;
          .onepx-border-bottom(#cdad66,2px)
        }
      }
      a{
        display: block;
        width: 50%;
        background-color: #fafafa;
      }
      a.v-link-active{
        background-color: #fff;
        color: #C2A45C;
      }
      a:first-child.v-link-active{
        .onepx-border-top-right(#d2d2d2)
      }
      a:first-child.v-link-active+a{
        .onepx-border-bottom(#d2d2d2)
      }

      a:not(.v-link-active){
        .onepx-border-bottom(#d2d2d2)
      }
      a:last-child.v-link-active{
        .onepx-border-top-left(#d2d2d2)
      }
    }
  }
</style>
